<template>
  
  <div>

  <h1>欢迎光临水果店</h1>

 <table class="tb">
    <tr>
        <th>苹果10¥一斤，现打八折</th>
    </tr>
    <tr>
      <td>请输入购买斤数 <input type="number" v-model="n" /> </td>
    </tr>
    <tr>
      <td> <button @click="on(n)">结账买单</button> </td>
    </tr>
    <tr>
      <td>结账：总价 {{ sum }}¥ , 折后 {{ price }}¥ 优惠 {{ discount }}¥ </td>
    </tr>
 </table>

  </div>

</template>

<script>
export default {

  data () {
    return {
      n: "",
      sum: "",
      price: "",
      discount: ""
    }
  },
  methods: {
    on(n) {
        this.sum = n * 10
        this.price = n * 10 * 0.8
        this.discount = this.sum - this.price
    }
  }
}
</script>

<style>

h1{
  text-align: center;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}



.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}



</style>